<template>
    <div class="coursedet">
        <div class="head">
            <p @click="$router.back()">
                 </p>
                    <p>课程详情</p>
                    <p>
                        <img @click="showPopup" src="../assets/77.箭头_左右切换_o.png" alt="">
                    </p>
        </div>
        <div class="nav">
            <div class="nav-head">
                <span>{{courseDetail.title}}</span>
                <img src="../assets/images/66666.png" alt="">
            </div>
            <p class="img">
                <img src="../assets/55金币.png" alt="">
                <span>免费</span>
            </p>
            <p>共{{courseDetail.total_periods}}课时 | {{courseDetail.sales_base}}人报名</p>
            <p>开课时间{{courseDetail.start_play_year}}</p>
        </div>
        <div class="cen">
            <p>教学团队</p>
            <ul>
                <li v-for="(v,i) in teacherList" :key="i">
                    <img :src="v.avatar" alt="">
                    <span>{{v.teacher_name}}</span>
                </li>
            </ul>
        </div>
        <div class="jie">
            <p class="a">课程介绍</p>
            <p v-for="(v,i) in recommendCourseList" :key="i">{{v.title}}</p>
        </div>
        <div class="gang">
            <p>课程大纲</p>
            <div class="tan"> 
                <span class="h"></span>
                <span class="y">回访</span>
                <span>{{courseDetail.title}}</span>
            </div>
            <p>2021</p>
        </div>
        <div class="ping">
            <p>课程评论</p>
        </div>

        <div class="btn">
            立即报名
        </div>


        <van-popup v-model="show">
            <vue-qr :text="url" :size="200"></vue-qr>
        </van-popup>

    </div>
</template>
<script>
import { getClassifyDetail } from "@/http/request"
import vueQr from 'vue-qr'
export default {
    data() {
        return {
            courseDetail: [],
            teacherList: [],
            recommendCourseList: [],
            flag: false,
            url: window.location.href,
            show: false,
        }
    },
    components: {
        vueQr
    },
    mounted() {
        this.getClassifyDetailList()
    },
    methods: {
        async getClassifyDetailList() {
            let res = await getClassifyDetail(this.$route.query.id)
            console.log(res);
            this.courseDetail = res.data.data.info
            this.teacherList = res.data.data.teachers
            this.recommendCourseList = res.data.data.recommendCourse
        },
        showPopup() {
            this.show = true;
        },
    }
}
</script>
<style lang="scss" scoped>
.coursedet {
    .head {
        height: 30px;
        line-height: 30px;
        display: flex;
        justify-content: space-between;
        padding: 0 10px;
        align-items: center;
        background-color: #fff;
        border-bottom: 1px solid #eee;

        img {
            width: 20px;
            height: 20px;
            vertical-align: middle
        }
    }

    .nav {
        background-color: #fff;
        padding: 5px;

        .nav-head {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        p {
            margin: 10px 0;
        }

        .img {
            margin: 10px 0;

            img {
                width: 20px;
                height: 20px;
            }

            span {
                color: red;
                font-size: 20px
            }
        }
    }

    .cen {
        margin: 10px 0;
        background-color: #fff;

        p {
            padding: 10px;
        }

        ul {
            display: flex;
            justify-content: space-around;

            li {
                display: flex;
                flex-direction: column;
                align-items: center;

                img {
                    width: 50px;
                    height: 50px;
                }
            }
        }
    }

    .jie {
        background-color: #fff;
        padding: 10px;

        .a {
            font-size: 16px
        }

        p {
            margin: 5px 0;
        }
    }

    .gang {
        margin: 10px 0;
        background-color: #fff;
        padding: 10px;

        .tan {
            display: flex;
            align-items: center;

            .h {
                width: 10px;
                height: 10px;
                border-radius: 50%;
                background-color: #ea7a2f;
            }

            .y {
                color: #fff;
                background-color: #ea7a2f;
                border-radius: 20px;
                padding: 2px;
                margin: 5px;
            }
        }
    }

    .ping {
        background-color: #fff;
        padding: 10px;
    }

    .btn {
        width: 100%;
        height: 30px;
        line-height: 30px;
        background-color: #eb6100;
        color: #fff;
        text-align: center;
        position: fixed;
        top: 95%;
    }
}
</style>


